*{
  margin:0;
  padding:0;
}
li{list-style: none;}
a{text-decoration: none;}
@function rem($px,$rem:75){
  @return $px/$rem#{rem};
}
.container{
  height: 100vh;
  width: rem(750);
  background: #f5f5f5;
  overflow: hidden;
  margin: 0 auto;
  -webkit-user-select: none;
  font-family: 'Microsoft YaHei';
  @at-root .page_hd{
    font-size: rem(32);
    line-height: rem(90);
    width: rem(750);
    text-align: center;
    position: fixed;
    top: 0;
    background: #ffffff;
    color:#666666;
    @at-root .page_hd_back{
      position: absolute;
      left: rem(33);
      top: rem(35);
      width: rem(24);
      height: rem(24);
      border: 1px solid #666666;
      transform: rotate(-45deg);
      border-bottom: none;
      border-right: none;
    }
    @at-root .page_hd_more{
      position: absolute;
      top: rem(28);
      right: rem(26);
      width: rem(40);
      height: rem(40);
      ul{
        width: rem(40);
        height: rem(40);
        li{
          position: absolute;
          border: rem(5) solid #666666;
          width: rem(10);
          height: rem(10);
          top: rem(0);
        }
        li{
          position: absolute;
          border: rem(4) solid #666666;
          width: rem(10);
          height: rem(10);
          top: rem(0);
        }
        li:nth-child(2){
          right: rem(0);
        }
        li:nth-child(3){
          left: rem(0);
          bottom: rem(0);
          top: unset;
        }
        li:nth-child(4){
          right: rem(0);
          top: unset;
          bottom: rem(0);
        }
      }
    }
  }
  @at-root .page_bd{
    padding-top: rem(90);
    margin: 0 rem(30);
      @at-root .page_bd_place{
        font-size: rem(28);
        line-height: rem(100);
        color: #a4a4a4;
        a{
          color: #508cee;
          display: inline-block;
          margin-right: rem(15);
        }
      }
    @at-root .page_bd_content{
      //width:100vw;
      //height:100vh;
      margin-top: rem(-32);
      ul{
        li{
          height: rem(263);
          background: #ffffff;
          margin-top: rem(30);
          position: relative;
          overflow: hidden;
          @at-root .page_bd_east_stamps{
           float: left;
            text-align: center;
            width: rem(236);
            color:#ff801a;
            border-right: rem(1) dashed  #dddddd;
            height: rem(261);
            h1{
              font-size: rem(44);
              margin-top: rem(80);
            }
            p{
              font-size: rem(24);
              color: #ffa55d;
            }
          }
          @at-root .page_bd_details{
            float: left;
            width: rem(362);
            font-size: rem(24);
            height: rem(261);
            border-right: rem(1) dashed  #dddddd;
            dl{
              margin-left: rem(33);
              dt{
                color: #464646;
                margin-bottom: rem(26);
                margin-top: rem(75);
              }
              dd{
                color:#999999;
                margin-bottom: rem(26);
                width: rem(285);
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
            }
          }
          @at-root .page_bd_get{
            float: left;
            width: rem(90);
            height: rem(261);
            font-size: rem(25);
            color: #ffa55d;
            cursor: pointer;
            p{
              margin: rem(70) rem(35);
            }
          }
          @at-root .page_bd_gain{
              width:rem(144);
              height: rem(144);
              border: rem(4) solid #d2e7f9;
              position: absolute;
              border-radius: 50%;
              right: rem(45);
              top: rem(60);
              text-align: center;
              display: none;
            &::before{
              content:' ';
              display: inline-block;
              width: rem(126);
              height: rem(126);
              border:rem(2) solid #d2e7f9;
              border-radius: 50%;
              text-align: center;
              margin-top: rem(8);
            }
            p{
              position: absolute;
              top: rem(55);
              left: rem(35);
              transform: rotate(-45deg);
              font-size: rem(25);
              font-weight: bold;
              color: #bddcf6;
            }
          }
          @at-root .page_east{
             width: rem(133);
             line-height: rem(37);
             background: #ff801a;
             position: absolute;
             left: rem(-35);
             top: rem(10);
             font-size: rem(24);
             color: #ffffff;
             text-align: center;
             transform: rotate(-45deg);
          }
          @at-root .page_bd_circle{
            width: rem(32);
            height: rem(32);
            border-radius: 50%;
            background: #f5f5f5;
            position: absolute;
            top: rem(-18);
            left: rem(220);
          }
          @at-root .page_bd_circle_bot{
            top: unset;
            bottom: rem(-18);
          }
        }
      }
    }
  }
}
